
import React, {Component} from 'react'
import PropsRoute from "../News/index";
import {NavLink, Navigate, Route, Routes} from "react-router-dom";
import { NavBar, TabBar } from 'antd-mobile'
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
export default class MultilevelRoute extends Component {

    render() {
      const tabs = [
        {
          key: '/home/News',
          title: '首页',
          icon: <AppOutline />,
        },
        {
          key: '/todo',
          title: '我的待办',
          icon: <UnorderedListOutline />,
        },
        {
          key: '/message',
          title: '我的消息',
          icon: <MessageOutline />,
        },
        {
          key: '/me',
          title: '个人中心',
          icon: <UserOutline />,
        },
      ]
      const setRouteActive =()=>{
        history.push(value)
      }
        return (
            <div>
             
                <div>
                <TabBar onChange={value => setRouteActive(value)}>
                  {tabs.map(item => (
                    <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                  ))
                  }
                </TabBar>
                    <ul>
                        {/* 传参方式-params */}
                        <li><NavLink to="1/11">prop-params</NavLink></li>
                        {/* 传参方式-search */}
                        <li><NavLink to="/home/searchTest?id=2&code=22">prop-search</NavLink></li>
                        {/*
                            react-router-dom v5 传参写法:
                            <NavLink to={{pathname:'/multilevelRoute/stateTest',state:{id:'3',code:33}}}>prop-               state</NavLink>
                        */}
                        {/* 传参方式-state */}
                        <li><NavLink to="/home/stateTest" state={{id:'3',code:33}}>prop-state</NavLink></li>
                    </ul>
                </div>
                <div>
                    <Routes>
                        {/*
                            react-router-dom v5写法 path = "全路径":
                            <Route path="/multilevelRoute/search" element={<PropsRoute></PropsRoute>}></Route>
                        */}
                        {/* 
                            react-router-dom v6写法
                         */}
                        {/* <Route path="/paramsTest/:id/:code" element={<PropsRoute>params</PropsRoute>}></Route>
                        <Route path="/searchTest" element={<PropsRoute>search</PropsRoute>}></Route> */}
                        <Route path="News" element={<PropsRoute></PropsRoute>}></Route>
                        <Route path="/*" element={<Navigate to="News" />}></Route>
                    </Routes>
                </div>
            </div>
        )
    }
}
